<template>
  <el-container style="margin-left: 5px;">
    <el-container>
      <el-main>

        <el-row style="width: 70%;margin: 0 auto;margin-top:150px">
          <el-col :span="6">
            <el-button type="primary" plain round style="font-size: 80px;width: 100%;height: 500px;margin-top: 50px;border: 5px solid rgba(5,175,218,0.73);"
                       @click="yz()">上钟
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="success" plain round style="font-size: 80px;width: 100%;height: 250px;margin-top: 50px;margin-left: 3px;border: 5px solid rgba(8,243,8,0.43);"
                       @click="yz2()">换钟
            </el-button>
          </el-col>
          <el-col :span="6">
            <el-button type="danger" plain round style="font-size: 80px;width: 100%;height: 250px;margin-top: 50px;margin-left: 6px;border: 5px solid rgba(245,10,10,0.62);"
                       @click="xz()">下钟
            </el-button>
          </el-col>

          <el-col :span="6">
            <el-button type="warning" plain round style="font-size: 80px;width: 100%;height: 250px;margin-top: 50px;margin-left:  10px;border: 5px solid rgba(233,214,7,0.73);"
                       @click="yz1()">加钟
            </el-button>
          </el-col>


          <el-col :span="5">
            <el-button type="info" plain round
                       style="font-size: 40px;width: 100%;height: 245px;margin-top: 5px;margin-left:  3px;border: 5px solid rgba(18,17,18,0.22);"
                       @click="fycx()">费用查询
            </el-button>
          </el-col>
          <el-col :span="5">
            <el-button type="info" plain round
                       style="font-size: 40px;width: 100%;height: 245px;margin-top: 5px;margin-left:  6px;border: 5px solid rgba(18,17,18,0.22);"
                       @click="szcx()">上钟查询
            </el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="info" plain round
                       style="font-size: 40px;width: 100%;height: 245px;margin-top: 5px;margin-left:  9px;border: 5px solid rgba(18,17,18,0.22);"
                       @click="yz3()">换房
            </el-button>
          </el-col>
          <el-col :span="4">
            <el-button type="info" plain round
                       style="font-size: 40px;width: 100%;height: 245px;margin-top: 5px;margin-left:  12px;border: 5px solid rgba(18,17,18,0.22);"
                       @click="pd()">排队
            </el-button>
          </el-col>
        </el-row>

        <el-dialog      width="90%" :showClose="false" center      :visible.sync="centerDialogVisible"    >
          <el-card style=" width: 100%;  margin-top: -40px;">
            <div style="  height: 83vh;overflow: auto;">
              <Verify @comfirm="luru" :inputName="this.form.seat"></Verify>
            </div>
          </el-card>
        </el-dialog>
      </el-main>


    </el-container>

<!--    <el-dialog :visible.sync="centerDialogVisible"   width="70%"  :showClose="false"    center>
      <el-card class="shaocard">
        <div class="el-dialog-div">
          <Verify @comfirm="luru" :inputName="this.form.seat"></Verify>
        </div >
      </el-card>
    </el-dialog>-->
  </el-container>
</template>
<script>
import {
  paidui, listsz, huanfang
} from "@/api/module/yzx/details";

import Verify from "./Verify1.vue";

export default {
  name: "Details",
  components: {
    Verify
  },
  data() {
    return {
      zt: '',
      centerDialogVisible: false,
      form: {},
    }
  },
  created() {
  },
  methods: {
    /** 第一按钮操作 */
    luru(k) {
      this.form.seat = k;
      this.centerDialogVisible = false;
      this.hf();
    },
    fh() {
      this.centerDialogVisible = false;
    },
    yz() {
      listsz().then(response => {
        this.zt = response.data;
        console.log(this.zt);
        if (this.zt == "2") {
          this.sz();

        } else {
          this.$modal.msgError("已上钟");
        }
      });

    },
    yz1() {
      listsz().then(response => {
        this.zt = response.data;
        console.log(this.zt);
        if (this.zt == "1") {
          this.addz();
        } else {
          this.$modal.msgError("未上钟");
        }
      });

    },
    yz2() {
      listsz().then(response => {
        this.zt = response.data;
        console.log(this.zt);
        if (this.zt == "1") {
          this.hz();
        } else {
          this.$modal.msgError("未上钟");
        }
      });

    },
    yz3() {
      listsz().then(response => {
        this.zt = response.data;
        console.log(this.zt);
        if (this.zt == "1") {
          this.hfj();
        } else {
          this.$modal.msgError("未上钟");
        }
      });

    },


    fycx() {
      this.$router.push({path: "/jishi/feiyongcx"});
    },
    szcx() {
      this.$router.push({path: "/jishi/shangzhongcx"});
    },
    sz() {
      this.$router.push({path: "/jishi/shangzhong"});
    },
    xz() {
      this.$router.push({path: "/jishi/xiazhong"});
    },
    hz() {
      this.$router.push({path: "/jishi/huanzhong"});
    },
    jszt() {
      this.$router.push({path: "/jishi/jishizt"});
    },
    hfj() {
      this.centerDialogVisible = true;
    },
    hf() {
      huanfang(this.form).then(response => {

      });

    },
    addz() {
      this.$router.push({path: "/jishi/jiazhong"});
    },
    td() {
      this.$router.push({path: "/jishi/tuidanA"});
    },
    pd() {
      paidui().then(response => {
        this.$modal.msgSuccess("排队成功");
      });
    },
  }
};
</script>

